<template>
  <div class="hot-category">
    <el-tabs class="demo-tabs" @tab-change="handleTabChange" v-model="tabName">
      <el-tab-pane name="first">
        <template #label>
          <div class="item">
            <el-icon>
              <Clock/>
            </el-icon>
            <span class="title">最新</span>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <div class="item">
            <el-icon>
              <Bowl/>
            </el-icon>
            <span class="title">最热</span>
          </div>
        </template>
      </el-tab-pane>
      <template v-if="categoryList.length > 0">
        <el-tab-pane
          v-for="categroy in categoryList"
          :key="categroy.id"
          :name="categroy.id"
        >
          <template #label>
            <div class="item">
              <el-icon>
                <component :is="categroy.icon"></component>
              </el-icon>
              <span class="title">{{ categroy.typeName }}</span>
            </div>
          </template>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref, onMounted,reactive } from "vue";
import {getCatgoryList} from "@/api/common.js"
const $emits = defineEmits(['tabNameChange'])
let tabName = ref("");
let categoryList = reactive([]);
onMounted(() => {
 handlegetCatgoryList();
});

const handlegetCatgoryList = async() =>{
  const res = await getCatgoryList();
  console.log(res.data.cateList,"@@")
// reactive不能直接赋值，因为相当于直接换地址了，而响应式是绑定在原来那个对象的属性上的。
  categoryList = Object.assign(categoryList,res.data.cateList);
}
// 切换tab栏
const handleTabChange = (typeId)=>{
  $emits('tabNameChange',typeId)
}
</script>
<style lang="scss" scoped>
.hot-category {
  margin-top: 30px;
  .item {
    display: flex;
    align-items: center;

    .title {
      margin-left: 5px;
    }
  }
}

:deep .el-tabs__active-bar {
  left: 5px;
  background-color: $strong;
}
:deep .el-tabs__nav-wrap::after {
  background-color: #fff;
}
</style>
